<template>
    <div class="coupon-list" ref="couponListMain" :style="CouponList.length==0?'background-color: #fff;':'background-color: #f8f8f8;'">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">优惠券</span>
            </template>
        </van-nav-bar>

        <div class="title-tempalte">
            <span class="title">优惠券</span>
            <span class="title-ps" @click="Jumptoagre">
                <img src="../../assets/img/i.png" alt="">
                使用规则
            </span>
        </div>
        <img class="defultpage" src="../../assets/defaultpage/mycoupon-def.png" v-if="CouponList.length==0" alt="">


        <div class="list-template" v-if="CouponList.length>0" >
            <div v-for="(item,index) in CouponList">
            <div class="list-item-base"  v-if="index%2==0">
                <div class="list-item-1" :style="{'background-image': `url(${bg1})`}">
                    <div class="brand-title" v-if="item.use_cate==1">CASH</div>
                    <div class="brand-title" v-if="item.use_cate==2" style="font-family: 'PingFang SC','Microsoft YaHei';">{{item.category_id}}</div>
                    <div class="brand-title" v-if="item.use_cate==3">{{item.brand_id}}</div>
                    <van-row class="coupon-mark">
                        <van-col span="6"></van-col>
                        <van-col span="9">
                            <van-row class="coupon-type">
                                {{item.name}}
                            </van-row>
                            <van-row class="coupon-stopTime">
                                {{item.use_end_time}}止
                            </van-row>
                        </van-col>
                        <van-col span="8" class="coupon-money">
                            {{item.cate==1?`${parseInt(Number(item.free_money))}`:`${item.free_rate/10}折`}}
                            <img class="coupon-red-rmb" v-if="item.cate==1" src="../../assets/img/coupon-red-rmb.png" />
                        </van-col>
                    </van-row>
                    <van-row>
                        <div class="use-btn" @click="openDw(item)">立即使用</div>
                    </van-row>
                </div>
                <div class="cant-use-pts" v-if="item.is_use==0">
                    <div class="cant-use">此劵暂不可用</div>
                </div>
            </div>

            <div class="list-item-base" v-if="index%2!=0">
                <div class="list-item-2" :style="{'background-image': `url(${bg2})`}">
                    <div class="brand-title" v-if="item.use_cate==1">CASH</div>
                    <div class="brand-title" v-if="item.use_cate==2" style="font-family: 'PingFang SC','Microsoft YaHei';">{{item.category_id}}</div>
                    <div class="brand-title" v-if="item.use_cate==3">{{item.brand_id}}</div>
                    <van-row class="coupon-mark">
                        <van-col span="4"></van-col>
                        <van-col span="7" class="coupon-money">
                            {{item.cate==1?parseInt(Number(item.free_money)):`${item.free_rate/10}折`}}
                        </van-col>
                        <van-col span="13">
                            <van-row class="coupon-type">
                                {{item.name}}
                            </van-row>
                            <van-row class="coupon-stopTime">
                                {{item.use_end_time}}止
                            </van-row>
                        </van-col>
                    </van-row>
                    <van-row>
                        <div class="use-btn" @click="openDw(item)">立即使用</div>
                    </van-row>
                </div>
                <div class="cant-use-pts" v-if="item.is_use==0">
                    <div class="cant-use">此劵暂不可用</div>
                </div>
            </div>
        </div>

        <!-- <img class="coupon-no-get" v-if="CouponList.length==0" src="../../assets/img/coupon-no-get.png" alt=""> -->
            <!-- <div class="list-item-base">
                <div class="list-item-1" :style="{'background-image': `url(${bg1})`}">
                    <div class="brand-title">TEEZY</div>
                    <van-row class="coupon-mark">
                        <van-col span="6"></van-col>
                        <van-col span="9">
                            <van-row class="coupon-type">
                                品牌抵用券
                            </van-row>
                            <van-row class="coupon-stopTime">
                                2020-06-30 23:59:59止
                            </van-row>
                        </van-col>
                        <van-col span="7" class="coupon-money">
                            100
                        </van-col>
                    </van-row>
                    <van-row>
                        <div class="use-btn">立即使用</div>
                    </van-row>
                </div>
                <div class="cant-use-pts">
                    <div class="cant-use">此劵暂不可用</div>
                </div>
            </div>

            <div class="list-item-base">
                <div class="list-item-2" :style="{'background-image': `url(${bg2})`}">
                    <div class="brand-title">CASH</div>
                    <van-row class="coupon-mark">
                        <van-col span="4"></van-col>
                        <van-col span="7" class="coupon-money">
                            50
                        </van-col>
                        <van-col span="13">
                            <van-row class="coupon-type">
                                现金消费抵用券
                            </van-row>
                            <van-row class="coupon-stopTime">
                                2020-06-30 23:59:59止
                            </van-row>
                        </van-col>
                    </van-row>
                    <van-row>
                        <div class="use-btn">立即使用</div>
                    </van-row>
                </div>
                <div class="cant-use-pts">
                    <div class="cant-use">此劵暂不可用</div>
                </div>
            </div> -->



        </div>



        <div>
            <a-drawer
                title=""
                id="detailDrawer"
                :height="drawerBodyheight"
                :placement="placement"
                :getContainer="getDetailMain"
                :destroyOnClose="true"
                :closable="false"
                @close="draweronClose"
                :visible="drawervisible">
                <div class="drawer-text-main">
                    <h3>现金消费抵用券</h3>
                    <div class="use-direction">使用说明 <img @click="showContent" :src="showCon?sc2:sc1" alt=""></div>
                    <div class="use-direction-item">
                        <div class="use-direction-item-text" v-if="showCon">
                            <p>{{CouponDetail.content}}</p>
                        </div>

                        <div class="coupon-direction-template">
                            <van-cell-group>
                                <van-cell title="使用场景" v-if="CouponDetail.use_cate==1" value="全场" />
                                <van-cell title="使用场景" v-if="CouponDetail.use_cate==2" value="活动" />
                                <van-cell title="使用场景" v-if="CouponDetail.use_cate==3" value="品牌" />
                                <van-cell title="卡卷金额" :value="`￥ ${CouponDetail.free_money}`" />
                                <van-cell title="开始时间" :value="CouponDetail.use_start_time" />
                                <van-cell title="结束时间" :value="CouponDetail.use_end_time" />
                            </van-cell-group>
                        </div>
                    </div>
                </div>
                <img class="coupon-use" @click="toUse(CouponDetail)" src="../../assets/img/coupon-use.png" alt="">
            </a-drawer>
        </div>
    </div>
    </div>
</template>
<script>
import {_getUserCoupon,_getUserCouponList} from '../../service/coupon'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            bg1:require('../../assets/img/coupon-goup1.png'),
            bg2:require('../../assets/img/coupon-goup2.png'),

            sc1:require("../../assets/img/coupon-draw-more.png"),
            sc2:require("../../assets/img/coupon-draw-close.png"),
            drawerBodyheight:"8.9rem",
            drawervisible:false,
            placement: 'bottom',
            CouponList:[],
            CouponDetail:{},
            showCon:false,
        }
    },
    mounted(){
        if(localStorage.getItem('user')==null||localStorage.getItem('user')==undefined){//判断是否登录
            this.$router.push('/login')
            return
        }
        if(localStorage.getItem("routerHistory")!=null&&localStorage.getItem("routerHistory")!=undefined){
            let url=localStorage.getItem("routerHistory")
            if(url.indexOf("/own")>-1){//从个人中心的卡包里跳转
                this.getMyCoupon()
            }else if(url.indexOf("/details")>-1){//从商品详情跳转
                let id = this.$route.query.goodid;
                let amount=this.$route.query.amount
                this.getMyCouponwithGood(id,amount)
            }else{
                this.getMyCoupon()
            }
        }


        
    },
    methods:{
        toUse(info){
            if(localStorage.getItem("routerHistory")!=null&&localStorage.getItem("routerHistory")!=undefined){
                let url=localStorage.getItem("routerHistory")
                if(url.indexOf("/details")>-1){//从商品详情跳转
                    localStorage.setItem("Coupon-Item",JSON.stringify(info))
                    let id = this.$route.query.goodid;
                    this.$router.push({path:'/details',query: {id}})
                }
                // else if(url=="/getcou"){
                //     this.$router.push("/own")
                // }
                else{
                    this.$router.push("/indexs")
                }
            }
        },
        Jumptoagre(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:4}})
		},
        onClickLeft(){
            if(localStorage.getItem("routerHistory")=="/getcou"){
                this.$router.push("/own")
            }else{
                this.$router.go(-1)
            }
        },
        draweronClose(){
            this.drawervisible=false
        },
        getDetailMain(){
            return this.$refs.couponListMain
        },
        openDw(info){
            this.CouponDetail=info
            this.drawervisible=true
        },
        showContent(){
            this.showCon=!this.showCon
        },
        getMyCoupon(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getUserCouponList({
                user_id:uid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.CouponList.push(...res.data)
                }
            })
        },
        getMyCouponwithGood(goodid,price){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getUserCoupon({
                user_id:uid,
                goods_id:goodid,
                order_amount:price
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.CouponList.push(...res.data)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.coupon-list{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f8f8f8;
    .hometitle{
        font-size: 18px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }

    .title-tempalte{
        width: 100%;
        height: 15px;
        margin-top: 28px;
        padding-left: 15px;
        padding-right: 15px;
        .title{
            .font-SC();
            font-size: 15px;
            color: #333;
        }
        .title-ps{
            .font-SC();
            font-size: 12px;
            color: #999;
            float: right;
            vertical-align: middle;
            height: 12px;
            width: auto;
            line-height: 12px;
            margin-top: 3px;
            img{
                width: 12px;
            }
        }
    }


    .defultpage{
        width: 172px;
        position: absolute;
        top: 30%;
        left: 27%;
    }
    .coupon-no-get{
        width: 367px;
        position: absolute;
        bottom: 40px;
        left: 4px;
        right: 4px;
    }

    .list-template{
        width: 100%;
        height: auto;
        padding-top: 5px;
        position: absolute;
        padding-bottom: 50px;



        .list-item-base{
            width: 100%;
            height: 115px;
            position: relative;
            margin-top: 10px;
            .list-item-1{
                width: 345px;
                height: 115px;
                margin: 10px auto;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                // box-shadow: 3px 3px 20px rgba(153, 153, 153, .35);
                .brand-title{
                    font-family: "DINPro-Bold";
                    font-size: 15px;
                    color: #fff;
                    padding-top: 15px;
                    margin: 0 0 3px 20px;
                }
                .coupon-mark{
                    height: 40px;
                    margin-top: -9px;
                    .coupon-type{
                        .font-SC();
                        color: #f09090;
                        font-size: 10px;
                        text-align: right;
                        margin-top: 12px;
                        margin-right: 8px;
                    }
                    .coupon-stopTime{
                        font-family: "DINPro-Regular";
                        color: #f09090;
                        font-size: 9px;
                        text-align: right;
                        margin-top: 6px;
                        margin-right: 6px;
                    }
                    .coupon-money{
                        font-family: "DINPro-Bold";
                        font-size: 40px;
                        color: #fff;
                        line-height: 49px;
                        text-align: center;
                        .coupon-red-rmb{
                            width: 16px;
                            display: inline-block;
                            float: right;
                            margin-top: 15px;
                        }
                    }
                }
                .use-btn{
                    display: inline-block;
                    width: 60px;
                    height: 20px;
                    padding: 0;
                    background-color: #f6a7a7 ;
                    .font-SC();
                    font-weight: 1000;
                    font-size: 9px;
                    color: #fff; 
                    line-height: 20px;
                    text-align: center;
                    float: right;
                    margin-right: 33px;
                    margin-top: 7px;
                    box-shadow: 3px 3px 3px rgba(196, 191, 191, .35);
                }
            }
            .cant-use-pts{
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 3;
                width: 100%;
                .cant-use{
                    border-radius: 5px;
                    width: 345px;
                    height: 100%;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(0, 0, 0, .3);
                    .font-SC();
                    font-size: 15px;
                    color: #fff;
                }
            }

        }



        .list-item-base{
            width: 100%;
            height: 115px;
            position: relative;
            margin-top: 10px;
            .list-item-2{
                width: 345px;
                height: 115px;
                margin: 0 auto;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                // box-shadow: 3px 3px 20px rgba(153, 153, 153, .35);
                .brand-title{
                    font-family: "DINPro-Bold";
                    font-size: 15px;
                    color: #fff;
                    padding-top: 15px;
                    margin: 0 0 3px 20px;
                }

                .coupon-mark{
                    height: 40px;
                    margin-top: -9px;
                    .coupon-type{
                        .font-SC();
                        color: #47b5e6;
                        font-size: 10px;
                        text-align: right;
                        margin-top: 5px;
                        margin-right: 16px;
                    }
                    .coupon-stopTime{
                        font-family: "DINPro-Regular";
                        font-size: 9px;
                        color: #47b5e6;
                        text-align: right;
                        margin-top: 8px;
                        margin-right: 14px;
                    }
                    .coupon-money{
                        font-family: "DINPro-Bold";
                        font-size: 32px;
                        color: #fff;
                        line-height: 49px;
                        text-align: center;
                    }
                }


                .use-btn{
                    display: inline-block;
                    width: 60px;
                    height: 20px;
                    padding: 0;
                    background-color: #89c9e6;
                    .font-SC();
                    font-weight: 1000;
                    font-size: 9px;
                    color: #fff; 
                    line-height: 20px;
                    text-align: center;
                    float: right;
                    margin-right: 33px;
                    margin-top: 7px;
                    box-shadow: 3px 3px 3px rgba(196, 191, 191, .35);
                }
            }
            .cant-use-pts{
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 3;
                width: 100%;
                .cant-use{
                    border-radius: 5px;
                    width: 345px;
                    height: 100%;
                    margin: 0 auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(0, 0, 0, .3);
                    .font-SC();
                    font-size: 15px;
                    color: #fff;
                }
            }
        }


        
    }

    /deep/.ant-drawer-body{
        padding:0;
    }
    /deep/.ant-drawer-mask{
        pointer-events: none;
    }
    /deep/ant-drawer-content-wrapper{
        height: 340px;
    }
    /deep/.ant-drawer-mask::before{
        content: url('../../assets/img/details-drawer-close.png');
        position: fixed;
        bottom: -100px;
        display: block;
        width: 56px;
        pointer-events: auto;
        opacity: 0;
        animation: closeIn ease .3s forwards;
        -moz-animation:closeIn ease .3s forwards ; /* Firefox */
        -webkit-animation:closeIn ease .3s forwards ; /* Safari and Chrome */
        -o-animation:closeIn ease .3s forwards ; /* Opera */
    }
    @keyframes closeIn{
        from{
            opacity: 0;
            bottom: 0;
        }
        to{
            opacity: 1;
            bottom: 328px;
        }
    }


    .drawer-text-main{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 22px;
        h3{
            .font-SC();
            font-size: 15px;
            color: #333;
            margin-bottom: 0;
        }
        .use-direction{
            width: 100%;
            .font-SC();
            font-size: 12px;
            color: #333;
            margin-top: 30px;
            img{
                display: block;
                width: 17px;
                float: right;
            }
        }
        .use-direction-item{
            width: 100%;
            height: 115px;
            margin-top: 12px;
            border-radius: 5px;
            overflow: hidden;
            touch-action: pan-y;
            .use-direction-item-text{
                width: 100%;
                height: 100%;
                padding: 15px;
                overflow-y: auto;
                background-color: #f8f8f8;
                p{
                    .font-SC();
                    font-size: 12px;
                    color: #333;
                    line-height: 32px;
                }
            }

            .coupon-direction-template{
                margin-top: 10px;
                /deep/.van-cell{
                    padding: 0;
                    .font-SC();
                    font-size: 12px;
                    color: #333;
                    line-height: 25px;
                }
                /deep/.van-cell:not(:last-child)::after{
                    display: none;
                }
            }
            
        }
        
    }

    .coupon-use{
        width: 367px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }
    

}
</style>